CSY1063Web DevelopmentWeek 2

Chris RaffertyChris.Rafferty@northampton.ac.uk

Learning Objectives

This week we will be covering

−An introduction to CSS

Attaching CSS documents
Targeting elements
Box model
CSS units
Colours
Developer tools
Layouts

HTML

A basic valid HTML file looks like

HTML pt2

The output of the code

The browser showing the Heading tag and P tag

HTML pt3

When you put something in an HTML tag, the browser interprets that tag tomean a specific thing

−Headings, paragraphs, lists etc

The browser makes some assumptions about how these should look

−Headings are larger and in bold
−Text is black
−The page background is white
−etc

CSS

CSS can be used to override this behaviour and describe how these elementsshould look
CSS stands for cascading style sheets
CSS is a list of rules which are applied to elements on the page
In English a sample rule would be

−All headings should have red text
−The background should be blue
−The text should be 20 pixels

CSS pt2

CSS code goes in its own file
CSS code looks very different from HTML. You can tell a CSS file apart from anHTML file just by looking at the structure of the code
You have to specify the CSS file to use in the HTML document using the linktag in the <head> section of the page

CSS pt3

An image with the HTML from last week, there are arrows pointing to the <link> tag, the relationship or rel attribute and then the href with a .css extension.

The “rel” (relationship) tells The browser what type of File is being referenced

CSS file

Acssfile should be placed in the same folder as the HTML file and be given a.cssextension
You should create a CSS file in the same way you create HTML one, the easiestway is through your code editor (VS code, Sublime, Notepad++-see lastweeks notes)
Make sure you use the .cssextension

CSS code

CSS code uses this format

selector1 {
property: value;
property: value;
property: value;
}

selector2 {
property: value;
property: value;
}

Selector is used to find one or more HTML element

One or more properties are applied to the selected elements

The CSS file can contain as many blocks as you like Each block is a selector and properties

Braces are important: Every block must have an opening and closing brace!

CSS example

A selector can be a tag name
One property is “color” (Note the American spelling!)
To set H1 elements to red and paragraphs to blue

An image of the output of the code, the heading is red and the paragraph is blue, the css code has been applied to the html

CSS properties

When you target a tag it will affect any tag of that type

<body>
<h1>Page Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>

An image of the css code being applied to the html, the two paragraphs are blue while the header is red

CSS comments

A comment is a piece of code that is ignored by the browser
It is used to leave notes in the code for future references or for otherdevelopers
A comment in CSS starts with /* and ends with */
It’s a lot nicer than the HTML syntax

p {
background-color: darkblue;
color: white;
/* font-size: 50px; This wont be applied to the webpage */
}

Class name selector

Any element can be given a class this is an HTML attribute (see last week forattributes)
The class name selector works in the format

−.name_of_the_class
−A dot followed by the name of the class you want to match

This will match any element that has class=“name”
Note that the attribute does not include the dot in the HTML only in the CSSfile

Class name selector example

The class name selector is a name prefixed with a dot and selects any elementwith a class attribute set to that value

<body>
<h1 class="myClass">Page Heading</h1>
<p class="myClass">Paragraph 1</p>
<p>Paragraph 2</p>
</body>

Notice that both elements with the class “myclass” are green

An image showing both elements with the class myClass having their colour change to green

Class name selector pt2

The class name selector is useful whenever you want to be able to targetspecific elements on the page without affecting other elements by accident
You can have as many classes as you want in your html, they allow us to targetspecific elements of the HTML without it effecting any others
You can have multiple HTML elements with the same class name

ID selector

The ID selector works very similarly to the class name selector

−Uses a # prefix

#myID
Matches any element wit id=“myID” set as an attribute

Note that the HTML does not contain the # symbol!
IDs are different to class names
You can only use an ID once, each ID should apply to a single element on thepage

ID selector example

The ID name selector is a name prefixed with a hash and selects the elementwith that ID

<body>
<h1>Page Heading</h1>
<p id="myID">Paragraph 1</p>
<p>Paragraph 2</p>
</body>

You may only have one element with
each ID

An image showing the paragraph element with the ID myID having it's colour change to red

Which should I use?

In a lot of cases you can use a class name, or an element name or an ID toachieve exactly the same result!
You should avoid IDsbecause you cannot easily reuse the style (if you want tomake two elements red, you need to add twocssrules and two IDs!)
You should use element selectors when you want to affect all elements of thattype
If you want a specific style on a single part of the page, you should use classnames
Don’t use IDs there is no benefit to doing so

Combining selectors

HTML is a nested notation

−(Some) Elements can exist inside (some) other elements

You can usecssto target nested elements. By combining a selector with aspace you can target specific elements in the HTML DOM Tree

−article h1 {font-weight: bold}–Sets any <h1> element inside an <article>element to bold
−.myclassspan {font-style: italic}–Sets any <span> element inside an elementwith class=”myclass” to italic

This will target elements at any depth!

Combining selectors pt2

You can combine selectors to be more specific

<body>

<section class="myForm">
<h3>Form</h3>
<input type="button" value="Button 1">
</section>

<input type="button" value="Button 2">

</body>

.myForm input {
border-radius: 20px;
border: 3px solid #666;
box-shadow: 3px 3px 3px #000;
margin-bottom: 10px;
background-color: darkblue;
padding: 10px;
text-transform: uppercase;
color: white;
}

Notice that only the button inside the element with the class myform has been styled

An image showing that only the button inside the myForm class was effected by the CSS the other button input was not

Combining selectors pt3

This will target elements of any depth

<section class="myForm">
<h3>Form</h3>
<input type="button" value="Button 1">
<section>
<section>
<section>
<section class="test">
<input type="button" value="Button 2">
</section>
</section>
</section>
</section>
</section>

<input type="button" value="Button 3">

Notice that only the buttons inside the element with the class myform are styled, it doesn’t matter how nested the button is

An image showing both buttons nested in the class myForm have been effected, regardless for how nested the element is

Direct descendent

You can use the direct decedent selector to filter to only elements that areonly one level down
The direct decedent selector uses the greater than symbol>

Direct descendent example

This will target elements only one level down

Notice that only the button on the first level is selected, this is because of the direct descendent >

An image showing that only the first button has been selected due to the direct descendent being used

Combining selectors pt4

You can combine selectors into very complex expressionse.g

−#myelement > .myclassarticle section header h1

However, this is generally discouraged
We call this tightly coupled to the HTML: A slight change to the HTML will stopthe h1 tag being styled
As a rule of thumb you shouldn't need more than three levels of selector

Block and inline elements

Every element in HTML defaults to one of two display properties

−inline
−block

These are treated very differently by the browser and determine howelements interact with one another
Block level elements extend all the way across the page and nothing canappear on the same line as them
Inline elements are only as long as their content (e.g. the text inside them)and can appear on the same line

Block and inline elements pt2

By default

−Paragraphs, headings, lists, etc are block elements
−Buttons, images, textboxes and elements are inline

But this is only a default CSS can be used to override the display property inCSS can be set to inline or block to override the default behaviour

Block elements

Notice that the blue background goes all the way across the page

p {
background-color: darkblue;
color: white;
display: block;
}

An image showing the paragraph has a blue background that stretches across the whole screen

Inline elements

Notice that the blue background only extends the width of the text

p {
background-color: darkblue;
color: white;
display: inline;
}

An image showing the paragraph has a blue background that only extends to the width of the text

Block vs inline

Block and inline affects how elements interact with each other
Block elements will always be on their own line
Inline elements will appear on the same line if there is enough space

Inline elements example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<p>My Paragraph 1</p>
<p>My Paragraph 1</p>

</body>
</html>

An image showing both p tags are now on the same line, this is because they are both set to inline

Block elements example

The elements appear on the different lines

An image showing the p tags now appear on two separate lines, this is because they have been set to block instead of inline

Block vs inline size differences

Block elements can have a width and height
Setting a width and a height on inline elements will have no effect

Block elements size example

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
}

The elements appear on the different lines and don’t span the entire width of the page

An image showing the p tags have fixed widths and appear on separate lines, this is allowed as the elements have been set to block

Inline elements size example

p {
background-color: darkblue;
color: white;
display: inline;
width: 150px; /*no effect*/
}

Width has no effect on inline elements, both p tags stretch as wide as its content

An image showing the p tags both on the same line but the width only going as far as the content, this is because we cannot set a width on inline elements

Float

How do you put elements with a fixed width/height on the same line?
Float can be applied to block elements and have them appear on the sameline but with fixed dimensions
Float has three options

−None (the default)
−Left
−Right

Float: left

Float left will have the affect of stacking block elements left to right. Whenelements get too wide for the browser they will wrap to the next line

Float: left example

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
float: left;
}

An image illustrating the two p tags with fixed widths are now on the same line, this is due to the float left property being applied to them

Float: left multiple elements

As more elements are added, they will be stacked left to right until there is nomore room on the line

Float: left multiple elements example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
</body>
</html>

An image showing seven p tags all on the same line using float, when the tags get to the edge of the screen they start a new line.

Float: right multiple elements example

Float: right stacks the elements from right to left

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
float: right;
}

The p tags are now stacked from right to left using float: right

Float and background-color

<body>
<section class="red">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
</section>
</body>

As you expect, the paragraphs sit in the section with a red background

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
}

.red {
background-color: red;
}

An image showing the p tags in a column with a red background

Float and background-colorissue

But when float:left is added the red background disappears!

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
float: left;
}

.red {
background-color: red;
}

An image showing the red background colour has disappeared, this is due to float left being applied to the tags

Float and background-colorfix

By adding overflow: auto, the background appears again

p {
background-color: darkblue;
color: white;
display: block;
width: 150px;
float: left;
}

.red {
background-color: red;
overflow: auto;
}

An image showing the background colour has reappeared, this is because overflow: auto has been added to the red class

Exercise

Use your website from week 1 and add a CSS file to it
Style them so that the navigation appears vertically across the page
Use font-family: arial to give the pages a nicer font

−Or choose a different font if you prefer

Select background colours and font colours to make the pages look nicer

−Don’t forget colours for your <a> tags

Play around with the margins and paddings to make the page look nice
You can use the same CSS file for each of your HTML pages
You can remove the bullet points from a <li> using

−list-style: none;

Box model

CSS has several properties which perform a very similar task: Add gaps aroundan element
These properties are:

−Border
−Padding
−Margin

All three of these can be applied to the same element

Box model example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>Element 1</section>
<section>Element 2</section>
</body>
</html>

section {
background-color: darkblue;
color: white;
}

An image showing two html elements, there is a blue background colour and there are no gaps between them, they are in a column

Margin

Margin is used to describe the gap between different elements

section {
background-color: darkblue;
color: white;
margin: 20px;
}

An image showing two html elements, there is a blue background colour and this time there is a 20px gap around each one, this is due to the margin: 20px property

Padding

Padding is used to describe the gap inside the elements around the text

section {
background-color: darkblue;
color: white;
padding: 20px;
}

An image showing two html elements, there is a blue background colour and this time there is a 20px gap around each one from inside the element, this is due to the padding: 20px property

Border

Border is used to draw a border around the element with a specific colour

section {
background-color: darkblue;
color: white;
border: 20px solid red;
}

An image showing two html elements, there is a blue background colour and this time there is a 20px red border around each one, this is due to the border property

Margin, padding & border

These can all be applied to the same element

section {
background-color: darkblue;
color: white;
margin: 20px;
padding: 20px;
border: 20px solid red;
}

An image showing two html elements, there is a blue background colour and margin, padding and border properties are being applied to them

*

To get rid of the default margins and paddings from the web page (whiteborder around elements) you can use the * selector to target every elementon the page

−This allows us to set all of the default padding and margin values to 0, whichgives us total control over how those elements look on the page

An image showing the default padding and margin for elements

An image showing the padding and margin of the elements being set to 0 through the * selector

CSS units

All my examples usedpx–pixels
This is generally a bad idea because all screens are different sizes and peopleuse different font sizes
Instead, you can useem
Which is the width of an m character
This is useful when you want to apply consistent spacing regardless of fontsizes

px

p {
background-color: darkblue;
color: white;
padding: 5px;
}

h1 {
background-color: darkred;
color: white;
padding: 5px;
}

An image showing a heading element with a dark red background with a padding of 5px around it along with a paragraph tag with a dark blue background

em

p {
background-color: darkblue;
color: white;
padding: 1em;
}

h1 {
background-color: darkred;
color: white;
padding: 1em;
}

An image showing the padding around the two elements has got much bigger due to changing the unit to em instead of px

There are many different units in CSS

px–measurement in pixels (e.g. 80px)
ptfont point (only really useful for fonts) (e.g. 12pt)
% percentage of containing element size e.g. ( 50% )
vh/vw–Viewport width and viewport height (100vw is 100% the width of thebrowser)
This not a complete list!
Further reading:https://css-tricks.com/the-lengths-of-css/

CSS colours

You can use several colour names in yourcsse.g.

−background-color: blue
−background-color: red

But these are very limited and there are only a handful available.
Modern monitors are capable of displaying 16 million different colour

−It would be impossible to give each of them a unique name!

CSS RGB

CSS uses numerical colours that describe an amount of Red, Green and Blue(RGB)
The range is from 0-255 for each colour.
There are three numbers in the order Red, Green, Blue.
The range 0-255 describes the amount of each colour

−255, 0, 0 describes pure red (100% red, no blue, nogreen)
−0, 255, 0 describes pure green
−0, 0, 255 describes pureblue

CSS RGB pt2

Other colours are made up by combining different amounts of red, green andblue
White is all three colours combined

−255, 255, 255

Black is none of each colour

−0, 0, 0

Any value where all three colours are the same will be grey

−50, 50, 50 (dark grey)
−200, 200, 200 (light grey)

CSS RGB pt3

Other colours are made by combining different amounts of the other colours
Yellow is 255, 255, 0 (mixing red and green)
Pink is 255, 0, 255 (mixing red and blue)

CSs RGB example

In CSS you can set an RGB colour using the following code
This sets the h1’s background colour to green and font colour to red

h1 {
background-color: rgb(0, 255, 0);
color: rgb(255, 0, 0);
}

CSS RGB colour picker

In most editors (Visual Studio Code) you have the option to use a colour picker
This makes it a lot easier to select the right colours you want to use

An image showing the built in colour picker in visual studio code

Hexadecimal

In addition to the RGB notation, CSS colours are more frequently written usinga hexadecimal notation.
The numbers we use daily use the decimal counting system where there areten different symbols (0-9)
Hexadecimal is a counting system which uses 16 different symbols

−0-9 then A-F

Hexadecimal table

1	1
2	2
3	3
4	4
5	5
6	6
7	7
8	8
9	9
10	A
11	B
12	C
13	D
14	E
15	F
16	10
17	11

Hexadecimal pt2

In Hexadecimal, 255 is expressed as FF
HTML/CSS colours are described using a # symbol, then 6 hexadecimal digits
The 6 digits are three pairs of numbers from 0-255
The first pair is red, second is green, third is blue. Therefore

−#FF0000 is equivalent to red ( 255, 0, 0)
−#00FF00 is equivalent to green (0, 255, 0)

Hexadecimal pt3

Hexadecimal is the most common colour notation used in CSS
You don’t really need to know the values as you can always look them up
If you do a lot of work in HTML/CSS you will be able to infer the colour fromthe number
This isn’t that important as you can just look up colours when you see them
The important part is that you know what to look for
When you see #020445 you should know it is referring to a colour, even ifyou’re not sure what that colour is

Hexadecimal example

Hexadecimal colours can be used in your CSS like so
The colour picker can also be used for Hexadecimal values, to change it fromRGB to Hex click on the top box with the value in it, you will cycle betweendifferent colour types

h1 {
background-color: #00FF00;
color: #FF0000;
}

An image of the visual studio colour picker now using hexadecimal values

Finding colour codes and colour combinations

There are lots of free colour pickers available online which will generate thecolour code for you

−https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

When designing a site, you want to choose colours that work well together. Avery useful resource for finding groups of colours for a design is

−https://www.colourlovers.com/

Fonts

You can set the font used by an element using the font-familycsspropertyfollowed by the name of the font you wish to use

h1 {
font-family: Verdana;
}

p {
font-family: Arial;
}

Fonts pt2

For this to work, the user has to have the font you have chosen installed ontheir computer
Different operating systems include different sets of fonts (e.g. MacOS doesnot include most of the Microsoft fonts!)
If you have Microsoft Office installed, it installs a considerable number ofadditional fonts which aren’t included in a normal Windows installation

Fonts pt3

You cannot rely on the user having the fonts installed on their computer
If you want to use a font beyond a very basic selection (Arial, Verdana, TimesNew Roman) you can include the font on the web page
When the user views your page, the browser downloads the font file alongwith the HTML and CSS
The font can then be used by the page

Web fonts

Doing so requires providing the font in a special format called web font
You can convert any font you like to awebfontusingFontSquirrel’sgenerator

−https://www.fontsquirrel.com/tools/webfont-generator

You upload the font and it converts it to awebfontfor use on your pages

Generating web fonts

There are several issues with this

−Legality. You cannot legally convert a font owned by someone else like Microsoftand distribute it on your website.
−Performance. If every website did this, then users would end up downloading thesame fonts over and over again for each website they visit.

Google fonts

Google provides a service for hosting royalty free fonts
You can embed fonts from google and any font on this service is freelyavailable

−https://fonts.google.com/

Browser developer tools

Modern web browsers contain a lot of tools for web developers to help thembuild their websites
You can open the developer tools in most browsers by pressing F12 on thekeyboard or right clicking and selecting “inspect element”
This is the best tool for a front end developer, it allows us to test CSS in thebrowser before applying it to our code
In JavaScript you will use the console which is found in the developer tools fordebugging

−(more on that in a few weeks)

Creating a layout

Your HTML elements will appear on the web page in the order they arecreated
We can use CSS to position elements exactly how we want them
The tricky part is doing this in a responsive way
Not all displays are the same, 100px on one screen will look very different onanother
We will now cover the best CSS layout to use for a responsive website

Semantic HTML

Back to HTML!
There are specific HTML elements that should be used to signify differentparts of the page
<header> for header sections
<nav> for navigation bars
<main> for the main content area
<aside> for sidebars
<footer> for the page footer

Semantic HTML example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>Heading</h1>
</header>

<nav>
<ul>
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
<li><a href="#">page 3</a></li>
</ul>
</nav>

<main>
<p>Lorem ipsum ...</p>
</main>

<aside>
Right hand side
</aside>

<footer>
© Your name 2023
</footer>
</body>
</html>

An image showing the html elements using the semantic tags, for example nav, main, footer etc

Adding colours to the semantic tags

header {
background-color: blue;
color: white;
padding: 20px;
}

nav {
background-color: yellow;
}

main {
background-color: darkblue;
color: white;
}

aside {
background-color: lightgreen;
}

footer {
background-color: darkgreen;
color: white;
}

An image showing the HTML now has the colours being applied to it, the header is blue, the navigation is yellow, the main is dark blue, aside is light green and the footer is dark green

A quick caveat

There are many, many ways to position HTML elements, including

−position: absolute (never do this, it will never display correctly in all browsers)
−display: table
−display: flex
−display: grid

I am only showing you the arguably best option.

display: grid

Display: grid is a very flexible but quite difficult solution. I will show thesimplest way of using it
Firstly, you need to set the containing element of the elements you want toposition to display: grid
In our case it’s the body element

grid-area

Next, you label each element you want to position using grid-area
These names are chosen by you and referenced later on
It’s good practice to just use the element names

grid-area example

header {
background-color: blue;
color: white;
padding: 20px;
grid-area: header;
}

nav {
background-color: yellow;
grid-area: nav;
}

main {
background-color: darkblue;
color: white;
grid-area: main;
}

aside {
background-color: lightgreen;
grid-area: aside;
}

footer {
background-color: darkgreen;
color: white;
grid-area: footer;
}

Columns

You then specify how many columns there are on the grid and their sizes onthe container (body element), we do this using grid-template-columns
And tell it to align the elements into rows
In this example we are going to use three columns

−The columns will be

20% for column 1
60% for column 2
20% for column 3

body {
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: auto;
}

Visualising the grid

This will create a grid with as many rows as necessary and 3 columns
You then specify which elements occupy which parts of the grid

A visual representation for how we want the website to look, the header spanning across all three columns, on the second row is the navigation, main and aside, then on the third row spanning all three columns is the footer

Creating the grid

To create the grid layout we use grid-template-areas: and then use the grid-area names we chose for the HTML elements (header, nav, main, aside,footer),remember to match the number of columns!

body {
display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer"
;
}

An image showing the web page in the grid layout we created using the grid-template-areas property

Exercise pt2

Follow the slides to create the 3 column layout

−Make sure you use the correct HTML elements (<header>, <main>, <nav>,<footer> and <aside>)

Once you’ve got the basic layout, tweak it to meet the following designs
:

An image of a different grid layout, this time it is a two column layout with four rows, the first row is the header which spans across both columns, then the next row is the navigation which spans across both columns, the third row has the main in the first column and then aside in the second, the last row has the footer which spans across both columns. The column widths are 80% 20%

Exercise pt3

An image of a different grid layout, this time it is a two column layout with three rows, the first row is the header which spans across both columns, then the next row is the navigation and the main, the third row has the footer which spans across both columns. The column widths are 20% 80%

Exercise pt4

The last grid layout, its a three row gird, the first row has the header and navigation, the second row has the main and aside then the last row has the footer which spans across both columns. The column widths are 50% 25% 25%, the navigation takes up two columns while aside only uses one.

Exercise pt5

Experiment with different designs and see if you can make your pages looknicer than mine (it is not a high bar!)

−Try different paddings, margins, borders, fonts and adding real content to thepages
−Use a selection of colours from colour lovers and fonts from google fonts to seehow nice you can make your page look

Exercise pt6

Start creating the layout for your assignment
Have a look online at some portfolio layout to take inspiration from
Figure out how many columns you would need and the sizing's